<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon" ref="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form
          :inline="true"
          :model="filterField"
          ref="searchConditions"
          label-width="80px"
          style="position: relative"
        >
          <el-form-item label="工程项目" class="row-padding-bottom">
            <el-input
              v-model="filterField.project"
              clearable
              placeholder="输入项目名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="整改状态" class="row-padding-bottom">
            <el-select
              v-model="filterField.status"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) of statusData"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="row-padding-bottom">
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="commonBtn"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        header-cell-class-name="tableHeaderName"
        highlight-current-row
        :row-key="recordId"
      >
        <el-table-column width="45" :reserve-selection="true"></el-table-column>
        <el-table-column prop="areaName" label="区域"></el-table-column>
        <el-table-column prop="industryName" label="行业"></el-table-column>
        <el-table-column
          prop="mainName"
          label="用工单位"
          min-width="160px"
        ></el-table-column>
        <el-table-column prop="projectName" label="工程项目"></el-table-column>
        <el-table-column prop="rectifyDate" label="整改截止日期">
          <template slot-scope="scope">
            <span>{{ scope.row.rectifyDate | formatYMDPoint }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusStr" label="整改状态"></el-table-column>

        <el-table-column label="操作" align="left" fixed="right">
          <template slot-scope="scope">
            <el-link type="primary" @click="toDetail(scope.row)">查看</el-link>
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示     -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关数据"></emptyTable>
        </div>
      </el-table>
      <!-- getTableList为获取子组件的数据 -->
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import topTitle from '@/components/publicCom/topTitle'
import emptyTable from '@/components/publicCom/emptyTable'
import Pagination from '@/components/publicCom/newPagination'
export default {
  name: 'proposal',
  components: {
    emptyTable,
    Pagination,
    topTitle,
  },
  data() {
    return {
      titleText: '建议书',
      statusData: [
        { name: '全部状态', code: '' },
        { name: '待企业整改', code: 'WAIT' },
        { name: '企业整改中', code: 'DOING' },
        { name: '整改完成', code: 'DONE' },
      ], //整改状态
      areasOptions: [], //区域
      areaArr: [],
      industryOptions: [], //行业
      //表格数据
      tableList: [
        /*{
          areaName: '武汉市', industryName: '交通',
          mainName: '湖北会基科技有限公司', projectName: '广州机场拓建工程二号航站及配套设施',
          problem: '3个', status: '待企业整改', founder: '张三（hdmin', createTime: '2020-12-11 19:50:00'
        },
          {
            areaName: '武汉市', industryName: '交通',
            mainName: '湖北会基科技有限公司', projectName: '广州机场拓建工程二号航站及配套设施',
            problem: '3个', status: '待企业整改', founder: '张三（hdmin', createTime: '2020-12-11 19:50:00'
          }*/
      ],
      requestUrl: 'api-ps/enforce/proposal/list',
      //搜索条件
      filterField: {
        areaId: '', //区域
        industryId: '', //行业
        status: '', //状态
        project: '', //项目名称
      },
      companyId: '', //跳转详情传参
      isShow: true, //列表加载
      loading: true,
      checkedId: [], //列表选中id数组
    }
  },
  filterField: {
    formatYMD(val) {
      let dt = new Date(val)
      return (
        dt.getFullYear() +
        '年' +
        (dt.getMonth() + 1) +
        '月' +
        dt.getDate() +
        '日'
      )
    },
    formatYMDPoint(val) {
      let dt = new Date(val)
      return dt.getFullYear() + '.' + (dt.getMonth() + 1) + '.' + dt.getDate()
    },
    formatFUll(val) {
      let dt = new Date(val)
      return (
        dt.getFullYear() +
        '年' +
        (dt.getMonth() + 1) +
        '月' +
        dt.getDate() +
        '日' +
        dt.getHours() +
        ':' +
        dt.getMinutes() +
        ':' +
        dt.getSeconds()
      )
    },
  },
  created() {
    //获取行业
    this.getIndustry()
    //获取区域
    this.getArea()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getIndustry() {
      const that = this
      this.axios({
        method: 'get',
        url: 'api-bs/base/dicitem/getuserindustry',
      })
        .then((res) => {
          if (res && res.data) {
            that.industryOptions = res.data.result
          }
        })
        .catch((error) => {
          that.$message({
            showClose: true,
            duration: 3000,
            message: '获取行业数据失败',
            type: 'error',
          })
        })
    },
    // 获取区域数据
    getArea() {
      const that = this
      this.axios({
        method: 'get',
        url: 'api-bs/areadic/base/detailbyareaid',
      })
        .then((res) => {
          if (res && res.data) {
            that.areasOptions = res.data.result
          }
        })
        .catch((error) => {
          that.$message({
            showClose: true,
            duration: 3000,
            message: '获取行业数据失败',
            type: 'error',
          })
        })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      this.filterField.areaId = this.areaArr[this.areaArr.length - 1]
    },
    getTableList(data) {
      //console.log(data,'xxxxx');
      this.tableList = data.results
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.loading = true
      this.$refs.pagination.getTableListData()
    },
    recordId(row) {
      return row.id
    },
    //建议书详情
    toDetail(row) {
      this.$router.push({
        path: '/home/onlineLaw/qyDetailProposal',
        query: { id: row.id },
        name: 'qyDetailProposal',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/onlineLaw/qyProposal',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  top: 198px;
  .toolbar {
    margin-bottom: 20px !important;
  }

  @media screen and (min-width: 1280px) and (max-width: 1366px) {
    .searchInputWidth /deep/.el-form-item__label {
      width: 56px;
    }
  }
}
</style>
